<template>
	<div class="bg" v-loading="loading" :style="{'background-image': 'url(' + bgUrl + ')'}">
		<div class="bak" style="position:relative;">
			<div class="case" :class="{'case1':isSelectSchool}">
				<div class="trao">
					<p>Ⅰ校彩虹第二课堂平台版</p>
				</div>
				<div v-show="isSelectSchool" style="position: relative;">
					<div class="traotips">选择学校</div>
					<a-input style="height: 52px;" v-model="schoolName" placeholder="请选择学校" @focus="showSchool" @change="changeSchool"></a-input>
					<div class="anchor-point" style="display: block;margin-top: 20px;" v-show="isShowSchool">
						<!-- 滚动区域 -->
						<div class="scroll-content" ref="scrollContent" @scroll="onScroll">
							<div v-for=" (val, key , index) in cityjson" :key="key" class="alltop" :class="'top'+index">
								<div class="scroll-title">
									{{key}}
								</div>
								<div style="display: flex;">
									<div class="scroll-item" style="display: flex;height: 35px;" v-for="(item,index) in val" :key="index" @click="selectID(item.Name,item.ID)">
										{{item.Name}}
									</div>
								</div>
							</div>
						</div>
						<!-- 按钮 -->
						<div class="operation-btn">
							<div v-for=" (val, key , index) in cityjson" :key="index" @click="jump(index)"
								:style="{color: activeStep === index ? '#2e45ae' : '#aaa'}">{{key}}
							</div>
						</div>
					</div>
					<div class="anchor-point" style="display: block;margin-top: 20px;" v-show="isShowSchool2">
						<!-- 滚动区域 -->
						<div class="scroll-content" ref="scrollContent" >
							<div class="scroll-item" style="height: 35px;" v-for="(item,index) in SchoolList2" :key="item.ID" @click="selectID(item.Name,item.ID)">
								{{item.Name}}
							</div>
						</div>
					</div>
					<a-button type="primary" html-type="submit" class="btn" style="margin-top: 150px;" @click="isSelectSchool=false">
						确定
					</a-button>
				</div>
				<a-form v-show="!isSelectSchool" id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
					<div class="traotips" style="padding-top: 0;">{{state=='register'?'找回密码':'账号登录'}}</div>
					<div>
						<a-form-item>
							<a-input style="height: 52px;background-color: #F5F6F8;border: none;"
								v-decorator="['userNo', { rules: [{ required: true, message: '请输入账号' }] }]"
								placeholder="请输入账号">
								<a-icon slot="prefix" type="user"
									style="color: RGB(46,69,174) margin-top: 20px margin-left: 20px;" />
							</a-input>
						</a-form-item>
						<a-alert v-if="state=='register'" style="margin-bottom: 5px;" message="学生请输入身份证后六位,老师请输入手机号后六位" type="warning" />
						<a-form-item v-if="state=='register'">
							<a-input style="height: 52px;background-color: #F5F6F8;border: none;"
								v-decorator="['sfzh', { rules: [{ required: true, message: '请输入新密码' }] }]"
								placeholder="请输入新密码">
								<a-icon slot="prefix" type="user"
									style="color: RGB(46,69,174) margin-top: 20px margin-left: 20px;" />
							</a-input>
						</a-form-item>

						<a-form-item v-if="state!='register'">
							<a-input-password style="height: 52px;"
								v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
								placeholder="请输入密码">
								<a-icon slot="prefix" type="lock"
									style="color: RGB(46,69,174) margin-top: 20px margin-left: 20px;" />
								<!-- <img  src="../assets/NewImg/login_password.png"/> -->
							</a-input-password>
						</a-form-item>
						<a-form-item v-if="state=='register'">
							<a-input-password style="height: 52px;"
								v-decorator="['newPassword', { rules: [{ required: true, message: '请再次输入新密码' }] }]"
								placeholder="请再次输入新密码">
								<a-icon slot="prefix" type="lock"
									style="color: RGB(46,69,174) margin-top: 20px margin-left: 20px;" />
								<!-- <img  src="../assets/NewImg/login_password.png"/> -->
							</a-input-password>
						</a-form-item>
					</div>
					<a-form-item>
						<a-button v-if="state=='register'" class="btn" style="background-color: #fff;margin-right: 15px;" @click="isSelectSchool=true">
							返回上一步
						</a-button>
						<a-button type="primary" html-type="submit" class="btn">
							{{state=='register'?'设置密码':'登录'}}
						</a-button>
						
					</a-form-item>
					<a-form-item v-if="state!=='register'">
						<a-button class="btn" style="background-color: #fff;" @click="isSelectSchool=true">
							返回上一步
						</a-button>
					</a-form-item>
					<a-form-item>
						<div class="mao" v-if="state=='register'" @click="change('1')">返回登录</div>
						<div class="mao" v-else @click="change('2')">忘记密码</div>
					</a-form-item>
				</a-form>
			</div>
		</div>
		<div class="gif">
			<span>
				技术支持：
				<img src="@/assets/6 (3).png" alt="" />
			</span>
		</div>
	</div>
</template>

<script>
	import {
		DoLoginTwo,
		sendCode,
		getTokenToUser,
		GetUserInfo,
		DoSetPassword,
		UserCenterDoForgetPasword,
		DoLogin,
		GetCommonSchoolList,
		UserCenterDoGetSchoolBackGround
	} from '@/api/follow';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Cache from '@/utils/cache';
	export default {
		data() {
			return {
				activeStep: 0,
				cityjson: {},
				state: "",
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				userShow: true,
				actice: 0,
				sendtext: '发送验证码',
				Phone: '',
				loading: false,
				isShowSchool:false,
				isShowSchool2:false,
				SchoolList: [],
				SchoolList2:[],
				schoolID:Cache.set('myInfo')?Cache.set('myInfo').SchoolID:'',
				schoolName:'',
				isSelectSchool:true,
				bgUrl:''
			};
		},
		created() {
			this.autoLogin();
			this.fetchSchool();
			// this.getBg()
			this.bgUrl = require('../assets/images/bglogin.png')
		},
		computed: {
			...mapState(['token'])
		},
		methods: {
			async getBg(id){
				let res = await UserCenterDoGetSchoolBackGround({
					schoolID:id
				});
				this.bgUrl = res.data.data || require('../assets/images/bglogin.png')
			},
			async changeSchool(e){
				console.log(11111111111111)
				if(this.schoolName){
					this.isShowSchool2 = true
					this.isShowSchool = false
					this.SchoolList2 = this.SchoolList.filter(item=>item.Name==this.schoolName)
					let res = await GetCommonSchoolList({
						key: this.schoolName
					});
					this.SchoolList2 = res.data.data;
				}else{
					this.showSchool()
				}
			},
			showSchool(){
				this.isShowSchool = true
				this.isShowSchool2 = false
			},
			selectID(name,id){
				this.schoolName = name
				this.schoolID = id
				this.isShowSchool = false
				this.isShowSchool2 = false
				this.getBg(id)
			},
			onScroll(e) {
				let scrollItems = document.querySelectorAll('.alltop')
				for (let i = scrollItems.length - 1; i >= 0; i--) {
					// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
					let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
					if (judge) {
						this.activeStep = i
						break
					}
				}
			},
			// 跳转的相关内容
			jump(index) {
				// 获取该元素的高度
				let scrolly = document.querySelector(`.top${index}`).offsetTop
				document.querySelector('.scroll-content').scrollTop = scrolly
				this.activeStep = index
			},
			getFirstPin(list) {
				let pinyin = require('js-pinyin');
				pinyin.setOptions({
					checkPolyphone: false,
					charCase: 0
				});
				//先拿到全部城市的名字
				let cityArr = [];
				let arr = []
				for (let i = 0; i < list.length; i++) {
					//遍历数组,拿到城市名称
					let cityName = list[i].Name;
					//取全部城市的首字母
					let fristName = pinyin.getCamelChars(cityName).substring(0, 1); //这里截取首字母的第一位
					//给原json添加首字母键值对
					list[i].first = fristName;
					//放入新数组
					cityArr.push(list[i]);
					if (arr.findIndex(item => item === fristName) == -1) {
						arr.push(fristName)
					}
				}
				let cityJson = {};
				let that = this
				//根据首字母键值对给原数据按首字母分类
				for (let i = 0; i < arr.length; i++) { //这里的FirstPin是一个写入了所有字母的数组,见data中
					cityJson[arr[i]] = cityArr.filter(function(value) {
						return value.first === arr[i];
					})
				}
				this.cityjson = cityJson;
				console.log(this.cityjson)
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			async fetchSchool(value) {
				let res = await GetCommonSchoolList({
					key: value
				});
				this.SchoolList = res.data.data || [];
				this.getFirstPin(this.SchoolList)
			},
			change(num) {
				if (num == '1') {
					this.state = ''
				} else {
					this.state = 'register'
				}
			},
			...mapMutations(['SET_TOKEN']),
			autoLogin() {
				let that = this;
				let hrefUrl = window.location.href;
				let ticket = '';
				if (hrefUrl.indexOf('=') > -1) {
					ticket = decodeURIComponent(hrefUrl.split('=')[1]);
					Cache.set('token', ticket);
					this.SET_TOKEN(ticket);
					Cache.set('SYS_TOKEN', ticket);
					setTimeout(async function() {
						let res1 = await GetUserInfo();
						console.log(res1.data)
						Cache.set('myInfo', res1.data);
						Cache.set('loginKey', 1);
						that.$router.push({
							path: 'index'
						});
					}, 300);
				} else {
					// window.location.href="http://i.aufe.edu.cn/portal_main/toPortalPage"
				}
			},
			cheak(index) {
				if (index == 0) {
					this.userShow = true;
					this.actice = 0;
				} else {
					this.userShow = false;
					this.actice = 1;
				}
			},
			handleSubmit(e) {
				let that = this;
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					if (!err) {
						this.loading = !this.loading;
						let data = values;
						data.schoolID = this.schoolID
						let res = {}
						if (that.state == 'register') {
							res = await UserCenterDoForgetPasword(data);
						} else {
							res = await DoLogin(data);
						}
						if (res.data.code == 0) {
							this.$message.success(res.data.msg);
							if (that.state == 'register') {
								//把表单清空
								this.$nextTick(() => {
									this.form.setFieldsValue({
										userNo: '',
										sfzh: '',
										newPassword: '',
									});
								})
							}
							if (that.state != 'register') {
								Cache.set('token', res.data.ticket);
								this.SET_TOKEN(res.data.ticket);
								Cache.set('SYS_TOKEN', res.data.ticket);
								setTimeout(async function() {
									let res1 = await GetUserInfo();
									Cache.set('myInfo', res1.data);
									Cache.set('loginKey', 1);
									that.$router.push({
										path: '/'
									});
								}, 300);
							}
						} else {
							this.$message.error(res.data.msg);
						}
						this.loading = !this.loading;
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.anchor-point {
		position: absolute;
		margin-bottom: 20px;
		width: 100%;
		z-index: 999;
		background: #fff;
		.scroll-content {
			height: 260px;
			width: 100%;
			overflow-y: scroll;
			.scroll-title {
				height: 35px;
				font-weight: bold;
			}

			.scroll-item {
				// padding-left: 10px;
				margin:0 10px 5px 10px;
				padding: 0 5px;
				height: 35px;
				line-height: 35px;
				cursor: pointer;
				margin-bottom: 5px;
				&:hover{
					background: rgb(46, 69, 174);
					color: #fff;
				}
			}
		}

		.operation-btn {
			position: absolute;
			right: -15px;
			top: 0;
			bottom: 0;
			margin: auto;
			background: none;
			text-align: right;
			width: 10%;
			height: 100%;
			z-index: 999;
			div {
				margin-bottom: 3px;
				cursor: pointer;
			}
		}
	}

	.traotips {
		color: #0F3193;
		font-size: 16px;
		font-weight: bold;
		padding-bottom: 15px;
	}

	.bg {
		position: fixed;
		// background: url('../assets/images/bglogin.png') no-repeat;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.bak {
		width: 100%;
	}

	.bak img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
	}

	.gif {
		display: flex;
		flex-direction: column;
		margin: 25px 0 15px 0;
		width: 100%;
		position: fixed;
		bottom: 10px;
		color: #fff;
	}

	.gif p {
		align-self: center;
		margin-bottom: 6px;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.gif span {
		align-self: center;
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		color: #fff;
	}
	
	.case {
		// position: absolute;
		// z-index: 2;
		// left: 50%;
		// top: 300px;
		// width: 280px;
		// margin-left: -140px;
		// // height: 280px;
		// background: #ffffff;
		// border-radius: 7px;
		// padding: 0 20px;
		width: 490px;
		height: 531px;
		background: #FFFFFF;
		box-shadow: 5px 9px 30px 1px rgba(169, 183, 224, 0.5900);
		border-radius: 25px 25px 25px 25px;
		opacity: 1;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -270px;
		margin-left: -245px;
		box-sizing: border-box;
		padding: 18px 38px 38px 52px;
	}
	.case1{
		width: 700px;
		margin-left: -350px;
	}
	.trao {
		width: 100%;
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		overflow: hidden;
		margin: 15px auto;

		p {
			width: 100%;
			height: 40px;
			line-height: 40px;
			float: left;
			text-align: center;
			margin: 0;
		}

		.actice {
			border-bottom: 1px solid #1890ff;
		}
	}

	.line {
		width: 100%;
		border-top: 1px solid #f2f2f2;
		margin-bottom: 20px;
	}

	/deep/.ant-select-selection--single {
		height: 52px;
	}

	/deep/.ant-select-selection__rendered {
		line-height: 50px;
	}

	/deep/.ant-form-item-children {
		display: flex;

		.con-left {
			flex: 1;
		}

		.con-right {
			width: 80px;
			margin-left: 10px;
			background: #1890ff;
			text-align: center;
			color: #fff;
			border-radius: 6px;
			height: 32px;
			line-height: 32px;
		}
	}

	.btn {
		margin: 0 auto;
		margin: 0 auto;
		width: 100%;
		height: 52px;
		background-color: #2e45ae;
	}

	/deep/.ant-btn-primary:hover,
	.ant-btn-primary:focus {
		background-color: #2e45ae;
		border-color: #2e45ae;
	}

	.mao {
		width: 100%;
		text-align: center;
		font-size: 14px;
		cursor: pointer;
		color: #2e45ae;
	}
	/deep/.ant-input{
		height:52px;
	}
</style>
